<div class="home">
<div class="title">
    <div class="titlecontent">欢迎使用校园咨询平台</div>
</div>
<div class="outer">
    <div class="inner">
        <img src="../image/1.jpg" alt="">
        <img src="../image/2.jpg" alt="">
        <img src="../image/3.jpg" alt="">
        <img src="../image/4.jpg" alt="">
        <img src="../image/5.jpg" alt="">
        <img src="../image/1.jpg" alt="">
    </div>
</div>

<style>
    .outer{
        width: 1000px;
			height: 500px;
            overflow: hidden;
        margin: 0 auto;
    }
    .inner{
        width: 6000px;
		height: 500px;
		animation-name: lunbo;
		animation-duration: 20s;
		animation-iteration-count: infinite;
    }
    .inner:hover{
		animation-play-state: paused;
    }
    @keyframes lunbo{
			0%{
				margin-left: 0px;
			}
			20%{
				margin-left: -1000px;
			}
			40%{
				margin-left: -2000px;
			}
			60%{
				margin-left: -3000px;
			}
			80%{
				margin-left: -4000px;
			}
			100%{
				margin-left: -5000px;
			}
        }
        img{
			width: 1000px;
			height: 500px;
			float: left;
		}
    .title{
        width: 1500px;
        height: 150px;
    }
    .titlecontent{
        text-align: center;
        line-height: 150px;
        font-size: 80px;
    }
</style>

